<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 120 120"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#00407B" d="M98.665 58.973V19.222c-.107.011-.214.033-.32.044-15.846 2.197-24.597 8.475-33.923 18.655.361.502.989 1.383 2.125 2.966.334.468.507 1.003.507 1.55 0 1.505-1.35 2.799-3.14 3.01a3.835 3.835 0 0 1-.494.034c-1.282 0-2.471-.569-3.126-1.483-.107-.156-.227-.323-.334-.48-1.483 2.197-3.153 5.03-3.915 6.334-.6 1.037-1.884 1.706-3.273 1.706-.08 0-.147 0-.227-.011h-.027c-1.202-.067-2.285-.636-2.886-1.506-.6-.87-.654-1.929-.133-2.843 1.603-2.799 3.888-6.612 5.651-8.898a.348.348 0 0 1 .054-.067s.187-.234.267-.345C46.145 27.73 37.408 21.463 21.562 19.267l-.227-.034v85.634h81.004c2.031 0 3.661 1.372 3.661 3.067S104.357 111 102.339 111H20.012c-3.327 0-6.012-2.252-6.012-5.018v-87.53c0-.69.187-1.393.548-2.018.935-1.639 2.672-2.832 4.756-3.278a7.1 7.1 0 0 1 1.376-.145c.267 0 .548.023.815.045l.348.044c.307.045.6.078.908.123 17.035 2.364 26.881 8.943 37.209 19.535C70.3 22.154 80.134 15.587 97.142 13.223c.374-.056.735-.1 1.082-.145l.16-.022a6.699 6.699 0 0 1 2.192.078c2.418.502 4.395 2.051 5.157 4.058.173.458.267.937.267 1.428v40.397c0 .814-.374 1.584-1.069 2.163-.695.58-1.616.892-2.592.892-.08 0-.16 0-.24-.01-1.924-.079-3.434-1.44-3.434-3.09Z"/><path fill="#0075DB" d="M29 61.223a3.228 3.228 0 0 0 3.223 3.222h24.199a3.228 3.228 0 0 0 3.223-3.222A3.228 3.228 0 0 0 56.422 58h-24.2A3.228 3.228 0 0 0 29 61.223Zm0 14.883a3.228 3.228 0 0 0 3.223 3.222h14.59a3.22 3.22 0 0 0 3.222-3.222 3.228 3.228 0 0 0-3.222-3.223h-14.59A3.22 3.22 0 0 0 29 76.106Zm0 15.902a3.228 3.228 0 0 0 3.223 3.223h14.59a3.22 3.22 0 0 0 3.222-3.223 3.228 3.228 0 0 0-3.222-3.223h-14.59A3.22 3.22 0 0 0 29 92.008Z"/><path fill="#00407B" d="M101.438 77.219c0 10.617-8.602 19.219-19.22 19.219C71.603 96.438 63 87.835 63 77.218 63 66.603 71.602 58 82.219 58s19.219 8.613 19.219 19.219Zm-19.22-13.582c-7.5 0-13.581 6.082-13.581 13.582 0 7.5 6.082 13.582 13.582 13.582 7.5 0 13.582-6.082 13.582-13.582 0-7.5-6.07-13.582-13.582-13.582Z"/><path fill="#00407B" d="M102.914 100.176a3.04 3.04 0 0 1-4.3-.2L90.69 91.27l4.512-4.101 7.922 8.707a3.053 3.053 0 0 1-.211 4.301Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionskey2 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
